<template>
  <div class="events flex-column h-100P">
    <div class="justify-end align-center">
      <span class="fz-14 main-title">关键词</span>
      <el-input
        class="keyword"
        v-model="queryInfo.keyword"
        placeholder="请输入事件编号或事件设备"
        clearable
      ></el-input>
      <el-button type="info" @click="handleSearch">查询</el-button>
    </div>
    <div class="flex-sub flex-column mg-top-10">
      <div class="flex-sub" style="max-height: 70vh;">
        <el-table
          height="98%"
          header-cell-class-name="table-header-cell"
          header-row-class-name="table-header-row"
          v-loading="loading"
          :data="tableData"
        >
          <el-table-column label="事件编号" prop="id"></el-table-column>
          <el-table-column label="所属算法" prop="abilityTypeName"></el-table-column>
          <el-table-column label="事件设备" prop="deviceName">
            <template slot-scope="{row}">
              <div>
                <div>{{ row.deviceName }}</div>
                <div>{{ row.deviceNo }}(设备编号)</div>
              </div>
            </template>
          </el-table-column>
          <!--          <el-table-column label="告警方式" prop="remindModeEnumList">-->
          <!--            <template slot-scope="{row}">-->
          <!--              <div class="text-ellipsis">-->
          <!--                {{-->
          <!--                  row.remindModeEnumList && row.remindModeEnumList.map((remindMode) => RemindModeEnum.get(remindMode)).join(',')-->
          <!--                }}-->
          <!--              </div>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column label="创建时间" prop="createTime">
            <template slot-scope="{row}">
              <span>{{ row.createTime | dateTimeFormatter }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="140">
            <template slot-scope="{row}">
              <div class="justify-center">
                <el-button
                  type="text"
                  size="mini"
                  class="link-text fz-14"
                  @click="handleCheck(row)"
                >
                  查看
                </el-button>
              </div>
            </template>
          </el-table-column>
          <template v-slot:empty>
            <img :src="emptyImage" alt="" />
          </template>
        </el-table>
      </div>
      <ImgViewer :visible.sync="imgViewerVisible" :value="imgViewerMsg" />
      <el-pagination
        hide-on-single-page
        background
        layout="prev, pager, next, total, jumper"
        :total="queryInfo.total"
        :page-size="queryInfo.pageSize"
        @current-change="handlePageNoChange"
      />
    </div>
  </div>
</template>

<script>
import { apiFindEventPageByParam } from '@/views/algorithm/algorithm-logs/api'
import ImgViewer from '@/views/algorithm/components/img-viewer'

export default {
  name: 'Events',
  components: { ImgViewer },
  props: {
    ability: {
      type: Object,
      required: false,
      default: null,
    },
  },
  data() {
    return {
      loading: false,
      queryInfo: {
        abilityId: 'all',
        algOriginEnum: 'all',
        remindModeEnum: 'all',
        total: 0,
        pageSize: 14,
        pageNo: 1,
        keyword: '',
      },
      tableData: [],
      imgViewerMsg: {},
      imgViewerVisible: false,
    }
  },
  created() {
    this.initData()
  },
  computed: {
    emptyImage() {
      return `${this.$consts.OSS_STATIC_IMAGE_URL}/empty.png`
    },
  },
  methods: {
    initData() {
      this.handleSearch()
    },
    handleSearch() {
      this.findEventPageByParam()
    },
    handlePageNoChange(page) {
      this.queryInfo.pageNo = page
      this.findEventPageByParam()
    },
    handleCheck(row) {
      this.imgViewerMsg = {
        fileId: row.fileId,
        title: row.algAbilityName || '',
        dateTime: row.createTime,
      }
      this.imgViewerVisible = true
    },
    async findEventPageByParam() {
      this.loading = true
      const formData = {
        abilityTypeEnum: this.ability.abilityTypeEnum,
      }
      for (const key in this.queryInfo) {
        if (this.queryInfo[key] !== 'all' && this.queryInfo[key].toString().length) {
          formData[key] = this.queryInfo[key]
        }
      }
      const { records, pageNo, total } = await apiFindEventPageByParam(formData)
      this.tableData = [...records, ...records]
      this.queryInfo.total = total
      this.queryInfo.pageNo = pageNo
      this.loading = false
    },
  },
}
</script>

<style scoped lang="scss">
.events {
  .keyword {
    width: vw(350px);
    margin: 0 vw(20px);
  }
}
</style>
